<style lang="scss" scoped>
    .mshop-address {
        padding: 46px 0;

        .address-item {
            margin-bottom: 5px;
            background-color: white;
            padding: 0 .4em;
            display: flex;
            align-items: center;

            .choose {
                $circle-rect: 20px;
                display: flex;
                align-items: center;

                .circle {
                    width: $circle-rect;
                    height: $circle-rect;
                    background: url('../../assets/circle.png') no-repeat;
                    background-size: $circle-rect;
                    display: inline-block;
                    padding-right: 4px;
                }
                .choosed {
                    background: url('../../assets/circle-choosed.png') no-repeat;
                    background-size: $circle-rect;
                }
            }

            .info {
                width: 100%;
                .header {
                    display: flex;
                    justify-content: space-between;
                    font-size: 18px;
                    padding: .5em .5em 0 .5em;
                }

                .address {
                    font-size: 14px;
                    word-break: break-all;
                    max-height: 2.8em;
                    overflow: hidden;
                    padding: .5em;
                    box-shadow: 0 1px 0 rgba(0,0,0,.05),0 .5px 0 rgba(0,0,0,.09);
                }
            }

            &:active {
                background-color: #ececec;
            }
        }

        .address-footer {
            position: fixed;
            width: 100%;
            bottom: 0;
            left: 0;
            text-align: center;
            background-color: #f44336;
            color: white;
            padding: .6em 0;
            z-index: 1;
        }
    }

</style>

<template>
    <div class="mshop-address">
        <div class="address-item" v-for="address in addresss" @click="do_choose(address)">
            <div class="choose">
                <div
                 class="circle"
                 :class="{choosed: address.id == $route.query.id}" >
                </div>
            </div>

            <div class="info">
                <div class="header">
                    <span>{{ address.name }}</span>
                    <span>{{ address.phone }}</span>
                </div>

                <div class="address">
                    <span>{{ address.province.name }}</span>
                    <span>{{ address.city.name }}</span>
                    <span>{{ address.county.name }}</span>
                    <span>{{ address.street }}</span>
                </div>
            </div>
        </div>

        <div class="address-footer">
            <span v-link="{path: '/my/config/address/edit'}">新增收货地址</span>
        </div>
    <div>
</template>

<script>
    import addressService from 'services/address'
    import orderService from 'services/order'

    const temp_addresss = [
        {id: 1, name: '张三', zip: 200200, phone: '12345678901', street: '', choose: true, province: { id: 1, name: '上海'}, city: { id: 1, name: '上海'}, 'county': { id: 1, name: '浦东'}, delete: false},
        {id: 2, name: '张三', zip: 200200, phone: '12345678901', street: '上海上海市杨浦区国伟路135号10号楼', choose: true, province: { id: 1, name: '上海'}, city: { id: 1, name: '上海'}, 'county': { id: 1, name: '浦东'}, delete: false},
        {id: 3, name: '张三', zip: 200200, phone: '12345678901', street: '上海上海市杨浦区国伟路135号10号楼', choose: true, province: { id: 1, name: '上海'}, city: { id: 1, name: '上海'}, 'county': { id: 1, name: '浦东'}, delete: false},
        {id: 4, name: '张三', zip: 200200, phone: '12345678901', street: '上海上海市杨浦区国伟路135号10号楼', choose: true, province: { id: 1, name: '上海'}, city: { id: 1, name: '上海'}, 'county': { id: 1, name: '浦东'}, delete: false},
        {id: 5, name: '张三', zip: 200200, phone: '12345678901', street: '上海上海市杨浦区国伟路135号10号楼', choose: true, province: { id: 1, name: '上海'}, city: { id: 1, name: '上海'}, 'county': { id: 1, name: '浦东'}, delete: false},
    ]

    export default {
        data () {return {addresss: []}},
        route: {
            data: () => {
                return addressService
                    .fetch()
                    .then(({data}) => ({ addresss: data}), () => ({ addresss: temp_addresss}));
            }
        },
        methods: {
            do_choose (address) {
                orderService.setDefaultAddress(address);
                this.$route.router.go(history.back());
            }
        }
    }
</script>
